<!-- 示例2: 分页和排序 -->
<template>
  <Table
      :data="dataList"
      :columns="columns"
      :pagination="true"
      :virtualScroll="true"
      :page-size="5"
      v-model:current-page="currentPage"
      :sortable="true"
      v-model:sorted-column="sortedCol"
      @sort-change="handleSort"
  />
</template>

<script setup>
import { ref } from 'vue'
import Table from '@/components/Table/Table.vue'

// 生成50条模拟数据
const dataList = ref(Array.from({ length: 50 }, (_, index) => {
  // 生成从今天开始往前50天的日期
  const date = new Date()
  date.setDate(date.getDate() - index)
  const formattedDate = date.toISOString().split('T')[0]
  
  // 生成随机销售额（1000-10000之间）
  const amount = Math.floor(Math.random() * 9000 + 1000)
  
  return {
    id: index + 1,
    date: formattedDate,
    amount: amount
  }
}))

const currentPage = ref(1)
const sortedCol = ref({ field: null, order: null })

const columns = [
  { title: '序号', dataIndex: 'id', sortable: true },
  { title: '日期', dataIndex: 'date', sortable: true },
  { title: '销售额', dataIndex: 'amount', sortable: true }
]

function handleSort({ field, order }) {
  console.log('排序变化:', field, order)
  // 可以在这里实现本地排序
  if (field && order) {
    dataList.value.sort((a, b) => {
      if (order === 'asc') {
        return a[field] > b[field] ? 1 : -1
      } else {
        return a[field] < b[field] ? 1 : -1
      }
    })
  }
}
</script>

<style scoped>
.table-container {
  padding: 20px;
}
</style>